<template>
    <div class="horizontalBar">
        <div class="horizontalBarTitle">
            <span>人均医疗费用增长率</span>
            <div class="sort">
                <i class="el-icon-caret-top" :class="{isActive: active == '0'}" @click=" active = '0'"></i>
                <i class="el-icon-caret-bottom" :class="{isActive: active == '1'}" @click=" active = '1'"></i>
            </div>
        </div>
        <div class="horizontalBarChart">
            <div class="item"
                 v-for="(item, index) in data"
                 :key="index"
                 >
                <span class="name">{{item.name}}</span>
                <span class="bar">                   
                </span>
                <span class="value">{{item.value + item.unit}}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            active: "1"
        }
    },
    props: {
        data: {
            type: Array,
            default: () => [
                {
                    name: "城市名字sss",
                    value: "10",
                    unit: "%"
                },
                {
                    name: "城市名字",
                    value: "10",
                    unit: "%"
                },
                {
                    name: "城市名字",
                    value: "10",
                    unit: "%"
                },
                {
                    name: "城市名字",
                    value: "10",
                    unit: "%"
                },
                {
                    name: "城市名字",
                    value: "10",
                    unit: "%"
                },
                {
                    name: "城市名字",
                    value: "10",
                    unit: "%"
                },
                {
                    name: "城市名字",
                    value: "10",
                    unit: "%"
                },
                {
                    name: "城市名字",
                    value: "10",
                    unit: "%"
                },
                {
                    name: "城市名字",
                    value: "10",
                    unit: "%"
                },
            ]
        }
    }
}
</script>
<style lang="less" scoped>
.horizontalBar {
    .horizontalBarTitle {
        span {
            font-size: 13px;
            color: #595959;
            letter-spacing: 0;
            line-height: 14px;
        }
        .sort {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            vertical-align: middle;
            margin-left: 5px;
            i {
                font-size: 12px;
                color: #D8D8D8;
                cursor: pointer;
                letter-spacing: 0;
                line-height: 8px;
                &.isActive {
                    color: #0160C0;
                }
            }
        }
    }
    .horizontalBarChart {
        width: 100%;
        // height: calc(100% - 23px);
        height: 280px;
        overflow: hidden;
        overflow-y: auto;
        margin-top: 10px;
        .item {
            width: 100%;
            height: 52px;
            padding: 20px;            
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #303133;
            line-height: 12px;
            &:first-child {
                padding-top: 10px;
            }
            .name {
                width: 48px;
                line-height: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-right: 10px;                
            }
            .bar {
                flex: 1;
                height: 12px;
                background: #DEEFFF;
                border-radius: 6px;
                &::before {
                    content: "";
                    display: inline-block;
                    height: 12px;
                    width: 50%;
                    background-image: linear-gradient(-90deg, #4DAAF7 0%, #4188F3 93%);
                    border-radius: 6px;
                }
            }
            .value {
                margin-left: 10px;
            }
        }
    }
}
::-webkit-scrollbar {
    display: block;
    width: 5px;
    // height: 5px;
    // background: #D8D8D8;
}
</style>